<template>
  <div class="app-container">
    <el-collapse>
      <el-collapse-item>
        <div slot="title">
          &nbsp;&nbsp;&nbsp;{{$t('operatorLog.filter')}}&nbsp;&nbsp;&nbsp;<i class="icon iconfont icon-filter" style="font-size: 10px"></i>
        </div>
        <el-form :inline="true" :model="q" class="demo-form-inline query" label-position="left" >
          <el-form-item :label='$t("operatorLog.operator")'>
            <el-input v-model="q.nickname" :placeholder='$t("operatorLog.operator")' prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item :label='$t("operatorLog.operating_time")'>
            <div>
              <el-date-picker v-model="q.created_at.$gte" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder='$t("operatorLog.select_date_time")'></el-date-picker>
              -<el-date-picker v-model="q.created_at.$lt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder='$t("operatorLog.select_date_time")'></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.resource" :placeholder='$t("operatorLog.resource")' prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.resource_id" :placeholder='$t("operatorLog.resource_id")' prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item :label='$t("operatorLog.action")'>
            <el-select v-model="q.action" :placeholder='$t("operatorLog.please_choose")'>
              <el-option :label='$t("operatorLog.all")' :value=null></el-option>
              <el-option v-for="(act, key) of action_dict" :key="key" :label='$t("operatorLog.actions." + key)' :value="key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">{{$t('operatorLog.search')}}</el-button>
            <el-button type="danger" @click="reload">{{$t('operatorLog.reset')}}</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <el-table :data="listData.list" v-loading.body="listLoading" @sort-change="sortlist" element-loading-text="Loading" stripe border fit highlight-current-row>
      <el-table-column prop="created_at" :label='$t("operatorLog.operating_time")' sortable width="200"></el-table-column>
      <el-table-column prop="nickname" :label='$t("operatorLog.operator")' min-width="160"></el-table-column>
      <el-table-column prop="resource" :label='$t("operatorLog.resource")' min-width="160"></el-table-column>
      <el-table-column prop="resource_id" :label='$t("operatorLog.resource_id")' width="80"></el-table-column>
      <el-table-column prop="ip" label='IP' width="120"></el-table-column>
      <el-table-column prop="city" :label='$t("operatorLog.city")' width="80"></el-table-column>
      <el-table-column prop="action" :label='$t("operatorLog.action")' width="80">
        <template slot-scope="scope">{{changeAction(scope.row.action)}}</template>
      </el-table-column>
      <el-table-column prop="content" :label='$t("operatorLog.content")' width="380">
        <template slot-scope="scope"><div class="ellipsis">{{scope.row.content}}</div></template>
      </el-table-column>
      <el-table-column :label='$t("operatorLog.operating")' width="100" >
        <template slot-scope="scope">
          <div>
            <el-button type="text" size="small" icon="el-icon-view" @click="viewC(scope.row)"></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="q.$page" :page-sizes="$store.state.app.pageSizeArr"
                      :page-size="q.$size"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="listData.total_count">
      </el-pagination>
    </div>
    <el-dialog :title='$t("operatorLog.details")' :visible.sync="showContent" width="30%">
      <ul>
        <li v-for="(cont, key) of DetailContent" :key="key">{{key}} => {{cont}}</li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
  import { getRecordList } from '@/api/userdata'
  import {queryFilter} from '@/utils/patch'
  export default {
    data() {
      return {
        listData: {},
        q: {created_at: {}, $size: 30, $page: 1},
        listLoading: true,
        showContent: false,
        DetailContent: false,
        action_dict: {
          1: '创建',
          2: '更新',
          3: '删除',
          4: '得到'
        }
      }
    },
    created() {
      this.getList()
    },
    deactivated(){
      this.listLoading = false
    },
    methods: {
      viewC(row){
        console.log(row)
        this.showContent = true
        this.DetailContent = row
      },
      query(){
        this.getList()
      },
      reload() {
        this.q = {created_at: {}}
        this.getList()
      },
      sortlist(sort){
        this.q.$orderby = sort.prop
        this.getList()
      },
      handleSizeChange (val) {
        this.q.$size = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.q.$page = val
        this.getList()
      },
      getList() {
        let params = Object.assign({
          $orderby: '-created_at'
        }, this.q)
        let queryObj = queryFilter(params)
        this.listLoading = true
        getRecordList(queryObj).then(res => {
          if (res.status === 0) {
            this.listLoading = false
            this.listData = res.data
          }
        })
      },
      changeAction(val) {
        return val >= 5 ? '' : this.$t('operatorLog.actions.' + val)
      }
    }
  }
export const enOperatorLog = {
  //GENERALS
  filter: 'Click to filter',
  all: 'All',
  details: 'Details',

  //SEARCH
  operator: 'Operator',
  operating_time: 'Operating Time',
  action: 'Action',

  //PLACEHOLDER
  select_date_time: 'Select date and time',
  resource: 'Resource',
  resource_id: 'Resource ID',
  please_choose: 'Please choose',

  //ACTIONS
  search: 'Search',
  reset: 'Reset',
  actions: {
    1: 'Create',
    2: 'Update',
    3: 'Delete',
    4: 'Get'
  },

  //TABLE
  city: 'City',
  content: 'Content',
  operating: 'Operating'
}

export const zhOperatorLog = {
  //GENERALS
  filter: '点击筛选',
  all: '所有',
  details: '内容详情',

  //SEARCH
  operator: '操作者',
  operating_time: '操作时间',
  action: '动作',

  //PLACEHOLDER
  select_date_time: '选择日期时间',
  resource: '资源',
  resource_id: '资源ID',
  please_choose: '请选择',

  //ACTIONS
  search: '查询',
  reset: '重置',
  actions: {
    1: '创建',
    2: '更新',
    3: '删除',
    4: '得到'
  },

  //TABLE
  city: '城市',
  content: '内容',
  operating: '操作'
}
</script>
